﻿<style scoped>
.expected {
  color: red;
  border: 1px solid #606266;
  padding: 20px;
}
.expected > div {
  font-size: 1.5em;
  padding: 10px;
}
</style>
<template>
  <div class="app-container">
    <!-- 编辑 -->
    <template v-if="dialogStatus==='create' || dialogStatus==='update' || dialogStatus==='review'">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="right"
        label-width="120px"
        size="small"
      >
        <div class="pops">
          <div class="popUp left">
            <div style="width:120px;text-align:right">
              <span class="information-title">基础规则:</span>
            </div>
            <el-form-item v-if="dialogStatus!='review'" :label="$t('rule.name')+' :'" prop="name">
              <el-input v-model="temp.name"></el-input>
            </el-form-item>
            <el-form-item v-else :label="$t('rule.name')+' :'">
              <span>{{ temp.name }}</span>
            </el-form-item>
            <el-form-item
              v-if="createType === '2' || dialogStatus==='update'"
              :label="$t('rule.videoName')+' :'"
              prop="video_id"
            >
              <select-page
                :id="temp.video_id"
                :name="temp.video_name"
                style="width:200px"
                placeholder="请选择视频源"
                key-field="id"
                show-field="name"
                :data="videoOptions"
                :count="videoCount"
                :page-size="pageSize"
                @getList="getVideoList"
                @values="getVideoid"
              ></select-page>
            </el-form-item>
            <el-form-item
              v-if="dialogStatus!='review'"
              class="filter-rule"
              :label="$t('rule.data')+' :'"
              prop="data"
            >
              <div class="filter-item">
                <el-date-picker
                  v-model="temp.start_time"
                  :picker-options="pickerOptionsBT"
                  type="date"
                  placeholder="开始日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                ></el-date-picker>
              </div>
              <div class="filter-item">
                <el-date-picker
                  v-model="temp.end_time"
                  :picker-options="pickerOptionsET"
                  type="date"
                  placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                ></el-date-picker>
              </div>
            </el-form-item>
            <el-form-item v-else :label="$t('rule.data')+' :'">
              <span>{{ getData(temp.start_time) }}&nbsp;至&nbsp;{{ getData(temp.end_time) }}</span>
            </el-form-item>
            <el-form-item
              v-if="dialogStatus!='review'"
              :label="$t('rule.time')+' :'"
              prop="rule_time"
            >
              <el-input v-model="temp.rule_time" style="display:none"></el-input>
              <time-select
                v-for="(item,index) in temptime"
                :key="index"
                :start="item.start"
                :end="item.end"
                :idx="index"
                @getSelectRuleTime="getSelectRuleTime"
                @reduceCount="reduceCount"
              ></time-select>
              <i class="el-icon-plus" @click="addDateTimeCount"></i>
            </el-form-item>
            <el-form-item v-else :label="$t('rule.time')+' :'">
              <span>{{ getRuleTime(temptime) }}</span>
            </el-form-item>
            <el-form-item v-if="type !== 3" :label="$t('public.region')+' :'" prop="area_show">
              <el-input v-model="temp.area_show" style="display:none"></el-input>
              <multiple-selection
                v-if="dialogStatus!=='review'"
                :picked="area_picked"
                placeholder="请选择区域"
                key-field="id"
                show-field="name"
                :data="areaOptions"
                :count="areaCount"
                :page-size="pageSize"
                style="width:210px"
                multiple
                @getList="(pageNumber, search)=>{return getList(pageNumber, search,'getArea')}"
                @values="getAreaid"
              ></multiple-selection>
              <span v-else-if="temp.region_name">{{ temp.region_name }}</span>
            </el-form-item>
            <el-form-item
              v-if="dialogStatus!='review'"
              :label="$t('rule.playlimit')+' :'"
              prop="play_limit"
            >
              <el-input-number v-model="temp.play_limit" controls-position="right" :min="1"></el-input-number>
            </el-form-item>
            <el-form-item v-else :label="$t('rule.playlimit')+' :'">
              <span>{{ temp.play_limit }}</span>
            </el-form-item>
            <el-form-item
              v-if="dialogStatus==='review' && temp.ad_word"
              :label="$t('rule.adWord')+' :'"
            >
              <span>{{ temp.ad_word }}</span>
            </el-form-item>
            <el-form-item
              v-else-if="dialogStatus!=='review'"
              :label="$t('rule.adWord')+' :'"
              prop="ad_word"
            >
              <el-input v-model="temp.ad_word" type="textarea"></el-input>
            </el-form-item>
            <el-form-item
              v-if="dialogStatus==='review' && temp.describe"
              :label="$t('rule.describe')+' :'"
            >
              <span>{{ temp.describe }}</span>
            </el-form-item>
            <el-form-item
              v-else-if="dialogStatus!=='review'"
              :label="$t('rule.describe')+' :'"
              prop="describe"
            >
              <el-input v-model="temp.describe" type="textarea"></el-input>
            </el-form-item>
            <el-form-item :label="$t('rule.isCoupon')+' :'">
              <el-switch
                v-if="dialogStatus!='review'"
                v-model="is_coupon"
                :active-value="1"
                :inactive-value="2"
              ></el-switch>
              <span v-else>{{ whetherEsSecond(is_coupon) }}</span>
            </el-form-item>
            <el-form-item
              v-if="dialogStatus!=='review' && is_coupon===1"
              :label="$t('rule.couponUrl')+' :'"
              prop="coupon_url"
            >
              <el-input v-model="temp.coupon_url"></el-input>
            </el-form-item>
            <el-form-item
              v-if="dialogStatus=='review' && is_coupon===1"
              :label="$t('rule.couponUrl')+' :'"
            >
              <span>{{ temp.coupon_url }}</span>
            </el-form-item>
            <el-form-item
              v-if="is_coupon===1 || temp.coupon_explain"
              :label="$t('rule.couponExplain')+' :'"
              prop="coupon_explain"
            >
              <el-input v-if="dialogStatus!='review'" v-model="temp.coupon_explain"></el-input>
              <span v-else>{{ temp.coupon_explain }}</span>
            </el-form-item>
            <el-form-item v-if="is_coupon===1" :label="$t('rule.buyAward')+' :'" prop="buy_award">
              <el-input-number v-model="temp.buy_award" :controls="false"></el-input-number>
            </el-form-item>
            <el-form-item
              v-if="is_coupon===1"
              :label="$t('rule.couponAward')+' :'"
              prop="coupon_award"
            >
              <el-input-number v-model="temp.coupon_award" :controls="false"></el-input-number>
            </el-form-item>
            <el-form-item
              v-if="dialogStatus=='review'"
              :label="$t('public.checkStatus')+' :'"
              prop="check_status"
            >
              <el-radio-group v-model="temp.check_status">
                <el-radio :label="0" disabled>审核中</el-radio>
                <el-radio :label="1">审核通过</el-radio>
                <el-radio :label="2">未通过</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              v-if="dialogStatus!=='create' && temp.check_status === 2"
              :label="$t('public.auditOpinion')+' :'"
              prop="check_remark"
            >
              <el-input
                v-if="dialogStatus!=='create' && permission.review"
                v-model="temp.check_remark"
                type="textarea"
              ></el-input>
              <span v-if="dialogStatus==='update' && !(permission.review)">{{ temp.check_remark }}</span>
            </el-form-item>
          </div>
          <div class="popUp right">
            <span class="information-title">精准投放:</span>
            <div style="text-align:right">
              <span
                :class="temp.timing === 1? 'TimeSlot selected':'TimeSlot'"
                @click="timeSlot"
              >时段定播</span>
            </div>
            <el-form-item v-if="type !==3" :label="$t('public.trade')+' :'">
              <multiple-selection
                :picked="trade_picked"
                placeholder="请选择行业"
                key-field="id"
                show-field="name"
                :data="industryOptions"
                :count="industryCount"
                :page-size="pageSize"
                style="width:210px;float:left"
                multiple
                @getList="(pageNumber, search)=>{return getList(pageNumber, search,'getIndustry')}"
                @values="getIndustryid"
              ></multiple-selection>
              <el-checkbox
                v-model="temp.trade_status"
                style="margin-left:10px"
                :true-label="2"
                :false-label="1"
              >排斥</el-checkbox>
            </el-form-item>
            <el-form-item
              v-if="area_picked.length>0 && type !== 3"
              :label="$t('rule.businessDistrict')+' :'"
            >
              <el-tabs
                v-model="classify_id"
                type="border-card"
                @tab-click="(tab, event)=>{return handleClick(tab, event,'classify_id')}"
              >
                <el-tab-pane label="不限" value="0"></el-tab-pane>
                <el-tab-pane
                  v-for="(item, index) in merchantCircle"
                  :key="index"
                  :label="item.name"
                  :name="item.id.toString()"
                ></el-tab-pane>
                <div>
                  <el-checkbox-group v-model="checkList">
                    <el-checkbox
                      v-for="(item, index) in merchantCircleItem"
                      v-show="item.classify_id == classify_id"
                      :key="index"
                      :label="item.id.toString()"
                    >{{ item.name }}</el-checkbox>
                  </el-checkbox-group>
                </div>
              </el-tabs>
            </el-form-item>
            <el-form-item
              v-if="area_picked.length>0 && type !== 3"
              :label="$t('equipment.type')+' :'"
            >
              <el-tabs
                v-model="sortType"
                type="border-card"
                @tab-click="(tab, event)=>{return handleClick(tab, event,'sortType')}"
              >
                <el-tab-pane label="不限" value="0"></el-tab-pane>
                <el-tab-pane
                  v-for="(item, index) in sortList"
                  :key="index"
                  :label="item.value"
                  :name="item.id.toString()"
                ></el-tab-pane>
                <div>
                  <el-checkbox-group v-model="sortCheckList">
                    <el-checkbox
                      v-for="(item, index) in sortItemList"
                      v-show="item.equipment_type == sortType"
                      :key="index"
                      :label="item.id"
                    >{{ item.name }}</el-checkbox>
                  </el-checkbox-group>
                </div>
              </el-tabs>
            </el-form-item>
            <el-form-item v-if="type !== 3" :label="$t('rule.designatedMerchant')+' :'">
              <multiple-selection
                :picked="merchant_picked"
                placeholder="请选择商家"
                key-field="id"
                show-field="name"
                :data="merchantOptions"
                :count="merchantCount"
                :page-size="pageSize"
                style="width:210px"
                multiple
                @getList="(pageNumber, search)=>{return getList(pageNumber, search,'getMerchant')}"
                @values="getMerchantid"
              ></multiple-selection>
            </el-form-item>
            <el-form-item
              v-if="merchant_picked.length>0 || type ===3"
              :label="$t('rule.equipmentCode')+' :'"
              :prop="type ===3 ? 'equipment_show': ''"
            >
              <el-input v-model="temp.equipment_show" style="display:none"></el-input>
              <multiple-selection
                v-if="dialogStatus!=='review'"
                :picked="equipment_picked"
                placeholder="请选择广告机"
                key-field="id"
                show-field="name"
                :data="equipmentOptions"
                :count="equipmentCount"
                :page-size="pageSize"
                style="width:210px"
                multiple
                @getList="(pageNumber, search)=>{return getList(pageNumber, search,'getEquipment')}"
                @values="getEquipmentid"
              ></multiple-selection>
              <span v-else-if="temp.equipment_code">{{ temp.equipment_code }}</span>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button @click="cancelAddRule">{{ $t('table.cancel') }}</el-button>
        <el-button
          v-if="dialogStatus=='create'"
          type="primary"
          :disabled="createDisabled"
          @click="createData"
        >{{ $t('table.confirm') }}</el-button>
        <el-button
          v-else
          type="primary"
          :disabled="updateDisabled"
          @click="updateData"
        >{{ $t('table.confirm') }}</el-button>
      </div>
    </template>
    <!-- 查看 -->
    <template v-else>
      <el-form
        label-position="right"
        label-width="120px"
        size="small"
      >
        <div class="pops">
          <div class="popUp left">
            <div style="width:120px;text-align:right">
              <span class="information-title">基础规则:</span>
            </div>
            <el-form-item :label="$t('rule.name')+' :'">
              <span>{{ temp.name }}</span>
            </el-form-item>
            <el-form-item :label="$t('rule.adName')+' :'">
              <span>{{ temp.ad_name }}</span>
            </el-form-item>
            <el-form-item :label="$t('rule.data')+' :'">
              <span>{{ getData(temp.start_time) }}&nbsp;至&nbsp;{{ getData(temp.end_time) }}</span>
            </el-form-item>
            <el-form-item :label="$t('rule.time')+' :'">
              <span>{{ getRuleTime(temptime) }}</span>
            </el-form-item>
            <el-form-item :label="$t('public.region')+' :'">
              <span>{{ temp.region_name }}</span>
            </el-form-item>
            <el-form-item :label="$t('rule.playlimit')+' :'">
              <span>{{ temp.play_limit }}</span>
            </el-form-item>
            <el-form-item :label="$t('rule.adWord')+' :'">
              <span v-if="temp.ad_word">{{ temp.ad_word }}</span>
              <span v-else>无广告词</span>
            </el-form-item>
            <el-form-item v-if="temp.describe" :label="$t('rule.describe')+' :'">
              <span>{{ temp.describe }}</span>
            </el-form-item>
            <el-form-item v-if="is_coupon===1" :label="$t('rule.couponUrl')+' :'">
              <span>{{ temp.coupon_url }}</span>
            </el-form-item>
            <el-form-item
              v-if="is_coupon===1 && temp.coupon_explain"
              :label="$t('rule.couponExplain')+' :'"
            >
              <span>{{ temp.coupon_explain }}</span>
            </el-form-item>
            <el-form-item v-if="is_coupon===1" :label="$t('rule.buyAward')+' :'">
              <span>{{ temp.buy_award }}</span>
            </el-form-item>
            <el-form-item v-if="is_coupon===1" :label="$t('rule.couponAward')+' :'">
              <span>{{ temp.coupon_award }}</span>
            </el-form-item>
            <el-form-item :label="$t('public.checkStatus')+' :'">
              <span>{{ statusEsSecond(temp.check_status) }}</span>
            </el-form-item>
            <el-form-item v-if="temp.check_status === 2" :label="$t('public.auditOpinion')+' :'">
              <span>{{ temp.check_remark }}</span>
            </el-form-item>
          </div>
          <div class="popUp right">
            <span class="information-title">精准投放:</span>
            <el-form-item v-if="temp.timing" :label="$t('rule.timing')+' :'">
              <span>{{ whetherEs(temp.timing) }}</span>
            </el-form-item>
            <el-form-item v-if="type !==3 && temp.trade_name" :label="$t('public.trade')+' :'">
              <span>{{ temp.trade_name }}</span>
              <el-checkbox
                v-if="temp.trade_status===2"
                v-model="temp.trade_status"
                style="margin-left:10px"
                :true-label="2"
                :false-label="1"
                disabled
              >排斥</el-checkbox>
            </el-form-item>

            <el-form-item v-if="temp.circle_classify_name" :label="$t('rule.classifyName')+' :'">
              <span>{{ temp.circle_classify_name }}</span>
            </el-form-item>
            <el-form-item v-if="temp.circle_name" :label="$t('rule.businessDistrict')+' :'">
              <span>{{ temp.circle_name }}</span>
            </el-form-item>
            <el-form-item v-if="temp.merchant_name" :label="$t('rule.designatedMerchant')+' :'">
              <span>{{ temp.merchant_name }}</span>
            </el-form-item>
            <el-form-item v-if="temp.equipment_type_name" :label="$t('equipment.type')+' :'">
              <span>{{ temp.equipment_type_name }}</span>
            </el-form-item>
            <el-form-item v-if="temp.equipment_name" :label="$t('rule.equipmentCode')+' :'">
              <span>{{ temp.equipment_name }}</span>
            </el-form-item>
            <el-form-item v-if="temp.bidding>1" :label="$t('rule.bidding')+' :'">
              <span>+{{ (temp.bidding-1).toFixed(1)*100 }}%</span>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button @click="cancelAddRule">{{ $t('table.cancel') }}</el-button>
        <el-button type="primary" @click="cancelAddRule">{{ $t('table.confirm') }}</el-button>
      </div>
    </template>

    <!-- 确认 -->
    <el-dialog title="确认订单" :visible.sync="dialogFormVisible" width="950px">
      <el-form label-position="right" label-width="30%" size="small">
        <div class="pops">
          <div class="popUp left">
            <div style="width:20%;text-align:right">
              <span class="information-title">基础规则:</span>
            </div>
            <el-form-item :label="$t('rule.name')+' :'">
              <span>{{ temp.name }}</span>
            </el-form-item>
            <el-form-item :label="$t('rule.data')+' :'">
              <span>{{ getData(temp.start_time) }}&nbsp;至&nbsp;{{ getData(temp.end_time) }}</span>
            </el-form-item>
            <el-form-item :label="$t('rule.time')+' :'">
              <span>{{ getRuleTime(temptime) }}</span>
            </el-form-item>
            <el-form-item :label="$t('public.region')+' :'">
              <span>{{ temp.region_name }}</span>
            </el-form-item>
            <el-form-item :label="$t('rule.playlimit')+' :'">
              <span>{{ temp.play_limit }}</span>
            </el-form-item>
            <el-form-item :label="$t('rule.adWord')+' :'">
              <span v-if="temp.ad_word">{{ temp.ad_word }}</span>
              <span v-else>无广告词</span>
            </el-form-item>
            <el-form-item v-if="temp.describe" :label="$t('rule.describe')+' :'">
              <span>{{ temp.describe }}</span>
            </el-form-item>
            <el-form-item v-if="is_coupon===1" :label="$t('rule.couponUrl')+' :'">
              <span>{{ temp.coupon_url }}</span>
            </el-form-item>
            <el-form-item
              v-if="is_coupon===1 && temp.coupon_explain"
              :label="$t('rule.couponExplain')+' :'"
            >
              <span>{{ temp.coupon_explain }}</span>
            </el-form-item>
            <el-form-item v-if="is_coupon===1" :label="$t('rule.buyAward')+' :'">
              <span>{{ temp.buy_award }}</span>
            </el-form-item>
            <el-form-item v-if="is_coupon===1" :label="$t('rule.couponAward')+' :'">
              <span>{{ temp.coupon_award }}</span>
            </el-form-item>
          </div>
          <div class="popUp right">
            <span class="information-title">精准投放:</span>
            <el-form-item v-if="temp.timing" :label="$t('rule.timing')+' :'">
              <span>{{ whetherEs(temp.timing) }}</span>
            </el-form-item>
            <el-form-item v-if="temp.trade_name" :label="$t('public.trade')+' :'">
              <span>{{ temp.trade_name }}</span>
              <el-checkbox
                v-if="temp.trade_status===2"
                v-model="temp.trade_status"
                style="margin-left:10px"
                :true-label="2"
                :false-label="1"
                disabled
              >排斥</el-checkbox>
            </el-form-item>
            <el-form-item v-if="temp.circle_classify_name" :label="$t('rule.classifyName')+' :'">
              <span>{{ temp.circle_classify_name }}</span>
            </el-form-item>
            <el-form-item v-if="temp.circle_name" :label="$t('rule.businessDistrict')+' :'">
              <span>{{ temp.circle_name }}</span>
            </el-form-item>
            <el-form-item v-if="temp.equipment_type_name" :label="$t('equipment.type')+' :'">
              <span>{{ temp.equipment_type_name }}</span>
            </el-form-item>
            <el-form-item v-if="temp.screen_attr_name" :label="$t('screen.attributes')+' :'">
              <span>{{ temp.screen_attr_name }}</span>
            </el-form-item>
            <el-form-item v-if="temp.merchant_name" :label="$t('rule.designatedMerchant')+' :'">
              <span>{{ temp.merchant_name }}</span>
            </el-form-item>
            <el-form-item v-if="temp.merchant_name" :label="$t('rule.equipmentCode')+' :'">
              <span>{{ temp.equipment_name }}</span>
            </el-form-item>
            <el-form-item v-if="temp.bidding>1" :label="$t('rule.bidding')+' :'">
              <span>+{{ (temp.bidding-1).toFixed(1)*100 }}%</span>
            </el-form-item>
            <div class="expected">
              <div>预计播放设备数: {{ temp.count }}</div>
              <div>预计收费总金额: {{ temp.money }}</div>
            </div>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
        <el-button
          v-if="dialogStatus=='update'"
          type="primary"
          :disabled="reviewDisabled"
          @click="updateData('confirm')"
        >{{ $t('table.confirm') }}</el-button>
        <el-button
          v-else
          type="primary"
          :disabled="reviewDisabled"
          @click="reviewData"
        >{{ $t('table.confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import TimeSelect from "@/views/play-rule/timeSelect"; // 引用时间组件
import MultipleSelection from "@/views/select/MultipleSelection"; // 分页选择控件
import selectPage from "@/views/select/SelectPage"; // 分页选择控件
import { getToken } from "@/utils/auth"; // get token from cookie

export default {
  name: "PlayRuleAppalication",
  components: {
    "time-select": TimeSelect,
    "multiple-selection": MultipleSelection,
    "select-page": selectPage
  },
  data() {
    const name = (rule, value, callback) => {
      // return false
      if (value.length > 0) {
        if (value.length > 20) {
          callback(new Error("规则名称长度不能大于20个字符"));
        } else {
          var reg = /^(?!(\d+)$)(?!(\_+)$)[\u4e00-\u9fff\w]+$/; /* 定义验证表达式 */
          if (reg.test(value)) {
            /* 进行验证 */
            callback();
          } else {
            callback(
              new Error(
                "规则名称只能包含汉字、英文、“_”和数字且不为纯数字或纯符号"
              )
            );
          }
        }
      } else {
        callback(new Error("请填写规则名称"));
      }
    };
    const remark = (rule, value, callback) => {
      if (value) {
        if (value.length <= 0) {
          callback(new Error("请输入审核意见"));
        } else if (value.length > 300) {
          callback(new Error("审核意见不能超过300个字符"));
        } else {
          callback();
        }
      } else {
        callback(new Error("请输入审核意见"));
      }
    };
    const adWord = (rule, value, callback) => {
      if (value) {
        if (value.length > 200) {
          callback(new Error("广告词不能超过200个字符"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    const describe = (rule, value, callback) => {
      if (value) {
        if (value.length > 200) {
          callback(new Error("规则描述不能超过200个字符"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    const couponExplain = (rule, value, callback) => {
      if (value) {
        if (value.length > 10) {
          callback(new Error("优惠券描述不能超过10个字符"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    const getData = (rule, value, callback) => {
      if (this.temp.start_time && this.temp.end_time) {
        callback();
      } else {
        callback(new Error("请选择规则日期！"));
      }
    };
    const buy_award = (rule, value, callback) => {
      if (value) {
        if (value > 0) {
          var pattern = /^\d+.?\d{0,2}$/;
          if (!pattern.test(value)) {
            callback(new Error("小数点后最多只能输入两位！"));
          } else {
            callback();
          }
        } else {
          callback(new Error("购买奖励不能为负数！"));
        }
      } else {
        callback();
      }
    };
    const coupon_award = (rule, value, callback) => {
      if (value) {
        if (value > 0) {
          var pattern = /^\d+.?\d{0,2}$/;
          if (!pattern.test(value)) {
            callback(new Error("小数点后最多只能输入两位！"));
          } else {
            callback();
          }
        } else {
          callback(new Error("扫码/下单奖励不能为负数！"));
        }
      } else {
        callback();
      }
    };
    return {
      classify_id: "0",
      sortType: "0",
      checkList: [],
      sortCheckList: [],
      showSearchItem: false,
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      type: "",
      createType: "",
      biddingOptions: [
        {
          value: 1.1,
          label: "+10%"
        },
        {
          value: 1.2,
          label: "+20%"
        },
        {
          value: 1.3,
          label: "+30%"
        },
        {
          value: 1.4,
          label: "+40%"
        },
        {
          value: 1.5,
          label: "+50%"
        }
      ],
      listQuery: {
        page: 1,
        limit: 20,
        name: "",
        ad_name: "",
        video_name: "",
        region_name: "",
        trade_name: "",
        equipment_code: "",
        check_status: "",
        is_coupon: "",
        startTime: "",
        endTime: ""
      },
      temp: {
        id: undefined,
        name: "",
        ad_id: "",
        video_id: "",
        data: "",
        start_time: "",
        end_time: "",
        play_time: "",
        play_limit: undefined,
        region_id: "",
        region_name: "",
        trade_id: "",
        trade_name: "",
        equipment_id: "",
        equipment_code: "",
        ad_word: "",
        describe: "",
        coupon_url: "",
        coupon_explain: "",
        rule_time: "",
        area_show: "",
        equipment_show: "",
        timing: 0,
        count: "",
        money: ""
      },
      is_coupon: 2,
      temptime: [{ start: "", end: "" }],
      area_picked: [],
      trade_picked: [],
      merchant_picked: [],
      equipment_picked: [],
      dialogFormVisible: false,
      dialogFormRead: false,
      dialogStatus: "",
      upLoading: false,
      visibleVideo: false,
      textMap: {
        update: "更新",
        create: "添加",
        review: "审核",
        read: "查看"
      },
      rules: {
        name: [{ required: true, trigger: "blur", validator: name }],
        ad_id: [{ required: true, message: "请选择广告主", trigger: "change" }],
        video_id: [
          { required: true, message: "请选择视频源", trigger: "change" }
        ],
        data: [{ required: true, trigger: "blur", validator: getData }],
        rule_time: [
          { required: true, message: "请选择播放时间", trigger: "change" }
        ],
        area_show: [
          { required: true, message: "请选择区域", trigger: "change" }
        ],
        play_limit: [
          { required: true, message: "请填写每日播放上限", trigger: "blur" }
        ],
        ad_word: [{ trigger: "blur", validator: adWord }],
        describe: [{ trigger: "blur", validator: describe }],
        coupon_url: [
          { required: true, message: "请填写优惠券链接", trigger: "blur" }
        ],
        buy_award: [{ trigger: "blur", validator: buy_award }],
        coupon_award: [{ trigger: "blur", validator: coupon_award }],
        coupon_explain: [{ trigger: "blur", validator: couponExplain }],
        check_status: [
          { required: true, message: "请审核", trigger: "change" }
        ],
        check_remark: [{ required: true, trigger: "blur", validator: remark }],
        equipment_show: [
          { required: true, message: "请选择广告机", trigger: "change" }
        ]
      },
      createDisabled: false,
      updateDisabled: false,
      reviewDisabled: false,
      loading: false,
      areaOptions: [],
      areaCount: undefined,
      videoOptions: [],
      videoCount: undefined,
      industryOptions: [],
      industryCount: undefined,
      pageSize: 10,
      equipmentOptions: [],
      equipmentCount: undefined,
      merchantOptions: [],
      merchantCount: undefined,
      pickerOptionsBT: {
        disabledDate: this.disabledDateBT
      },
      pickerOptionsET: {
        disabledDate: this.disabledDateET
      },
      merchantCircle: [],
      merchantCircleItem: [],
      sortList: [],
      sortItemList: []
    };
  },
  created() {
    if (sessionStorage.getItem("session")) {
      const video_data = JSON.parse(sessionStorage.getItem("session"));
      if (video_data.dialogStatus === "create") {
        this.dialogStatus = video_data.dialogStatus;
        this.temp.video_id = video_data.id;
        this.temp.video_name = video_data.name;
        this.createType = "1";
      } else if (video_data.dialogStatus === "createRule") {
        this.dialogStatus = "create";
        this.createType = "2";
      } else {
        // 编辑.查看规则详情
        this.dialogStatus = video_data.dialogStatus;
        if (video_data.check_status === 0 || video_data.check_status === 2) {
          this.getRuleDetails(video_data.id, video_data.dialogStatus);
        } else {
          this.getRuleDetailsSeconed(video_data.id);
        }
      }
    }
    this.type = JSON.parse(getToken()).type;
    if (JSON.parse(getToken()).type === 3) {
      this.area_picked = [
        {
          id: JSON.parse(getToken()).region_id,
          name: JSON.parse(getToken()).region_name
        }
      ];
      this.merchant_picked = [
        {
          id: JSON.parse(getToken()).id,
          name: JSON.parse(getToken()).name
        }
      ];
    }
  },
  methods: {
    disabledDateBT(time) {
      let returnData = time.getTime() < Date.now() - 8.64e7;
      if (this.temp.end_time) {
        returnData =
          time.getTime() >
            new Date(this.temp.end_time).getTime() +
              24 * 3600 * 1000 -
              8.64e7 || time.getTime() < Date.now() - 8.64e7;
      }
      return returnData;
    },
    disabledDateET(time) {
      let returnData = time.getTime() < Date.now() - 8.64e7;
      if (this.temp.start_time) {
        returnData =
          time.getTime() < new Date(this.temp.start_time).getTime() - 8.64e6 ||
          time.getTime() < Date.now() - 8.64e7;
      }
      return returnData;
    },
    getList(pageNumber = 1, search = "", name) {
      this[name](pageNumber, search);
    },
    getVideoList(pageNumber = 1, search = "") {
      this.getvideoName(pageNumber, search);
    },
    getVideoid(data) {
      if (data.length > 0) {
        this.temp.video_id = data[0].id;
        this.temp.video_name = data[0].name;
      } else {
        this.temp.video_id = undefined;
        this.temp.video_name = "";
      }
    },
    getMerchantid(data) {
      this.merchant_picked = data;
    },
    getAreaid(data) {
      this.area_picked = data;
      if (data.length > 0) {
        this.temp.area_show = 1;
        this.getMerchantCircle();
        this.getCircleOption();
        this.getSort();
        this.getSortOption();
      } else {
        this.temp.area_show = "";
      }
      this.classify_id = "0";
      this.checkList = [];
      this.sortType = "0";
      this.sortCheckList = [];
      this.merchant_picked = [];
    },
    getIndustryid(data) {
      this.trade_picked = data;
    },
    getEquipmentid(data) {
      this.equipment_picked = data;
      if (data.length > 0) {
        this.temp.equipment_show = 1;
      } else {
        this.temp.equipment_show = "";
      }
    },
    getMerchantCircle() {
      const data = {};
      if (this.area_picked) {
        const pickedData = this.getPicked("area_picked");
        data["region_id"] = pickedData.id;
      }
      const merchantCirclePath = {
        // 获取商圈类型列表
        company: "STQ",
        api: "pc_MerchantCircle_getClassifyList",
        version: "1.0",
        data: data
      };
      this.socketApi.sendSock(JSON.stringify(merchantCirclePath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    getCircleOption() {
      const data = {};
      if (this.area_picked) {
        const pickedData = this.getPicked("area_picked");
        data["region_id"] = pickedData.id;
      }
      data["status"] = 2;
      data["all"] = 1;
      const merchantCirclePath = {
        // 获取商圈
        company: "STQ",
        api: "pc_MerchantCircle_index",
        version: "1.0",
        data: data
      };
      this.socketApi.sendSock(JSON.stringify(merchantCirclePath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    getSort() {
      const data = {};
      if (this.area_picked) {
        const pickedData = this.getPicked("area_picked");
        data["region_id"] = pickedData.id;
        data["select"] = 3;
        data["returnType"] = "category";
      }
      const configIndexPath = {
        // 获取屏幕类型
        company: "STQ",
        api: "pc_EquipmentScreen_index",
        version: "1.0",
        data: data
      };
      this.socketApi.sendSock(JSON.stringify(configIndexPath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    getSortOption() {
      const data = {};
      if (this.area_picked) {
        const pickedData = this.getPicked("area_picked");
        data["region_id"] = pickedData.id;
        data["returnType"] = "option";
      }
      data["all"] = 1;
      const configIndexPath = {
        // 获取屏幕属性列表
        company: "STQ",
        api: "pc_EquipmentScreen_index",
        version: "1.0",
        data: data
      };
      this.socketApi.sendSock(JSON.stringify(configIndexPath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        name: "",
        ad_id: "",
        video_id: "",
        data: "",
        play_time: "",
        weight: 1,
        region_id: "",
        region_name: "",
        trade_id: "",
        trade_name: "",
        equipment_id: "",
        equipment_code: "",
        area_show: "",
        equipment_show: "",
        ad_word: "",
        describe: "",
        coupon_url: "",
        coupon_explain: "",
        timing: 0,
        count: "",
        money: ""
      };
      this.is_coupon = 2;
      this.temptime = [{ start: "", end: "" }];
    },
    getSelectRuleTime(start, end, idx) {
      this.temptime[idx].start = start;
      this.temptime[idx].end = end;
      const dataTime = [];
      this.temptime.forEach(element => {
        if (element.start && element.end) {
          dataTime.push(element);
        }
      });
      if (dataTime.length > 0) {
        this.temp.rule_time = "1";
      } else {
        this.temp.rule_time = "";
      }
    },
    reduceCount(start, end, idx) {
      this.temptime.splice(idx, 1);
      const dataTime = [];
      this.temptime.forEach(element => {
        if (element.start && element.end) {
          dataTime.push(element);
        }
      });
      if (dataTime.length > 0) {
        this.temp.rule_time = "1";
      } else {
        this.temp.rule_time = "";
      }
    },
    addDateTimeCount() {
      this.temptime.push({ start: "", end: "" });
    },
    timeSlot() {
      if (this.temp.timing === 0) {
        this.temp.timing = 1;
      } else {
        this.temp.timing = 0;
      }
    },
    unique1(arr) {
      var hash = [];
      for (var i = 0; i < arr.length; i++) {
        if (hash.indexOf(arr[i]) === -1) {
          hash.push(arr[i]);
        }
      }
      return hash;
    },
    getPicked(item) {
      const id = [];
      const name = [];
      this[item].forEach(element => {
        id.push(element.id);
        name.push(element.name);
      });
      return { id: id.join(","), name: name.join(",") };
    },
    sortOutData() {
      // 添加更新数据
      const dataTime = [];
      this.temptime.forEach(element => {
        if (element.start && element.end) {
          dataTime.push(element);
        }
      });
      const data = {
        name: this.temp.name,
        video_id: this.temp.video_id,
        video_name: this.temp.video_name,
        play_time: dataTime,
        ad_word: this.temp.ad_word,
        is_coupon: this.is_coupon,
        coupon_url: this.temp.coupon_url,
        coupon_explain: this.temp.coupon_explain,
        trade_status: this.temp.trade_status,
        play_limit: this.temp.play_limit,
        start_time: this.temp.start_time,
        end_time: this.temp.end_time,
        describe: this.temp.describe,
        buy_award: this.temp.buy_award,
        coupon_award: this.temp.coupon_award,
        bidding: this.temp.bidding,
        timing: this.temp.timing
      };

      if (this.area_picked.length > 0) {
        const pickedData = this.getPicked("area_picked");
        data["region_id"] = pickedData.id;
        data["region_name"] = pickedData.name;
      } else {
        data["region_id"] = "";
        data["region_name"] = "";
      }

      if (this.trade_picked.length > 0) {
        const pickedData = this.getPicked("trade_picked");
        data["trade_id"] = pickedData.id;
        data["trade_name"] = pickedData.name;
      } else {
        data["trade_id"] = "";
        data["trade_name"] = "";
      }

      if (this.merchant_picked.length > 0) {
        const pickedData = this.getPicked("merchant_picked");
        data["merchant_id"] = pickedData.id;
        data["merchant_name"] = pickedData.name;
      } else {
        data["merchant_id"] = "";
        data["merchant_name"] = "";
      }

      if (this.equipment_picked.length > 0) {
        const id = [];
        const name = [];
        const code = [];
        this.equipment_picked.forEach(element => {
          id.push(element.id);
          name.push(element.name);
          code.push(element.code);
        });

        data["equipment_id"] = id.join(",");
        data["equipment_code"] = code.join(",");
        data["equipment_name"] = name.join(",");
      } else {
        data["equipment_id"] = "";
        data["equipment_code"] = "";
        data["equipment_name"] = "";
      }

      if (this.classify_id !== "0") {
        const circle_classify_id = [];
        const circle_classify_name = [];
        const circle_id = [];
        const circle_name = [];
        this.checkList.forEach(element => {
          this.merchantCircleItem.forEach(merchant => {
            if (merchant.id === parseInt(element)) {
              circle_id.push(merchant.id);
              circle_name.push(merchant.name);
              circle_classify_id.push(merchant.classify_id);
              circle_classify_name.push(merchant.classify_name);
            }
          });
        });
        data["circle_classify_id"] = this.unique1(circle_classify_id).join(",");
        data["circle_classify_name"] = this.unique1(circle_classify_name).join(
          ","
        );
        data["circle_id"] = circle_id.join(",");
        data["circle_name"] = circle_name.join(",");
      } else {
        data["circle_classify_id"] = "";
        data["circle_classify_name"] = "";
        data["circle_id"] = "";
        data["circle_name"] = "";
      }

      if (this.sortType !== "0") {
        const equipment_type_name = [];
        const screen_attr_id = [];
        const screen_attr_name = [];
        const equipment_type = [];
        this.sortCheckList.forEach(element => {
          this.sortItemList.forEach(sort => {
            if (sort.id === element) {
              this.sortList.forEach(list => {
                if (list.id === sort.equipment_type) {
                  equipment_type_name.push(list.value);
                  equipment_type.push(list.id);
                }
              });
              screen_attr_name.push(sort.name);
              screen_attr_id.push(sort.id);
            }
          });
        });
        data["equipment_type"] = this.unique1(equipment_type).join(",");
        data["equipment_type_name"] = this.unique1(equipment_type_name).join(
          ","
        );
        data["screen_attr_id"] = screen_attr_id.join(",");
        data["screen_attr_name"] = screen_attr_name.join(",");
      } else {
        data["equipment_type"] = "";
        data["equipment_type_name"] = "";
        data["screen_attr_id"] = "";
        data["screen_attr_name"] = "";
      }
      return data;
    },
    createData() {
      // 添加广告规则
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          if (!this.createDisabled) {
            this.createDisabled = true;
            const data = this.sortOutData();
            if (this.createType === "2") {
              data["returnType"] = "createRule";
            } else {
              data["returnType"] = "create";
            }
            data["type"] = "submit";
            const addRulePath = {
              company: "STQ",
              api: "pc_AdPlayRule_addRule",
              version: "1.0",
              data: data
            };
            this.socketApi.sendSock(JSON.stringify(addRulePath), res => {
              if (res) {
                this.socketData(res);
              }
              setTimeout(() => {
                this.createDisabled = false;
              }, 1000);
            });
          }
        }
      });
    },
    updateData(name = "") {
      // 更新规则信息
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          if (!this.updateDisabled) {
            this.updateDisabled = true;
            const data = this.sortOutData();
            data["id"] = this.temp.id;
            if (name === "confirm") {
              data["returnType"] = "confirm";
            } else {
              data["returnType"] = "submit";
              data["type"] = "submit";
            }
            const editRulePath = {
              company: "STQ",
              api: "pc_AdPlayRule_editRule",
              version: "1.0",
              data: data
            };
            this.socketApi.sendSock(JSON.stringify(editRulePath), res => {
              if (res) {
                this.socketData(res);
              } else {
                this.$message.error(" 更新失败 ");
              }
              setTimeout(() => {
                this.updateDisabled = false;
              }, 1000);
            });
          }
        }
      });
    },
    handleReview() {
      // 打开审核弹窗

      // 区域回显
      if (this.area_picked.length > 0) {
        const pickedData = this.getPicked("area_picked");
        this.temp.region_id = pickedData.id;
        this.temp.region_name = pickedData.name;
      } else {
        this.temp.region_id = "";
        this.temp.region_name = "";
      }
      // 行业回显
      if (this.trade_picked.length > 0) {
        const pickedData = this.getPicked("trade_picked");
        this.temp.trade_id = pickedData.id;
        this.temp.trade_name = pickedData.name;
      } else {
        this.temp.trade_id = "";
        this.temp.trade_name = "";
      }
      // 商家回显
      if (this.merchant_picked.length > 0) {
        const pickedData = this.getPicked("merchant_picked");
        this.temp.merchant_id = pickedData.id;
        this.temp.merchant_name = pickedData.name;
      } else {
        this.temp.merchant_id = "";
        this.temp.merchant_name = "";
      }
      // 设备回显
      if (this.equipment_picked.length > 0) {
        const pickedData = this.getPicked("equipment_picked");
        this.temp.equipment_id = pickedData.id;
        this.temp.equipment_name = pickedData.name;
      } else {
        this.temp.equipment_id = "";
        this.temp.equipment_name = "";
      }
      // 商圈回显
      if (this.classify_id !== "0") {
        const circle_classify_name = [];
        const circle_name = [];
        this.checkList.forEach(element => {
          this.merchantCircleItem.forEach(merchant => {
            if (merchant.id === parseInt(element)) {
              circle_name.push(merchant.name);
              circle_classify_name.push(merchant.classify_name);
            }
          });
        });
        this.temp.circle_classify_name = this.unique1(
          circle_classify_name
        ).join(",");
        this.temp.circle_name = circle_name.join(",");
      } else {
        this.temp.circle_classify_name = "";
        this.temp.circle_name = "";
      }
      // 屏幕类型
      if (this.sortType !== "0") {
        const equipment_type_name = [];
        const screen_attr_name = [];
        this.sortCheckList.forEach(element => {
          this.sortItemList.forEach(sort => {
            if (sort.id === element) {
              this.sortList.forEach(list => {
                if (list.id === sort.equipment_type) {
                  equipment_type_name.push(list.value);
                }
              });
              screen_attr_name.push(sort.name);
            }
          });
        });

        this.temp.equipment_type_name = this.unique1(equipment_type_name).join(
          ","
        );
        this.temp.screen_attr_name = screen_attr_name.join(",");
      } else {
        this.temp.equipment_type_name = "";
        this.temp.screen_attr_name = "";
      }
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    handleClick(tab, event, name) {
      if (this.sortType === "0") {
        this.sortCheckList = [];
      }
      if (this.classify_id === "0") {
        this.checkList = [];
      }
    },
    reviewData() {
      // 确认规则信息
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          if (!this.reviewDisabled) {
            this.reviewDisabled = true;
            const data = this.sortOutData();
            if (this.createType === "2") {
              data["returnType"] = "createRuleConfirm";
            } else {
              data["returnType"] = "createConfirm";
            }
            const checkRulePath = {
              company: "STQ",
              api: "pc_AdPlayRule_addRule",
              version: "1.0",
              data: data
            };
            this.socketApi.sendSock(JSON.stringify(checkRulePath), res => {
              if (res) {
                this.socketData(res);
              } else {
                this.$message.error(" 审核失败 ");
              }
              setTimeout(() => {
                this.reviewDisabled = false;
              }, 1000);
            });
          }
        }
      });
    },
    // 行业选择
    getIndustry(pageNumber, search) {
      const industryIndexPath = {
        company: "STQ",
        api: "pc_trade_index",
        version: "1.0",
        data: {
          name: search,
          page: pageNumber,
          rows: this.pageSize,
          type: 2
        }
      };
      this.socketApi.sendSock(JSON.stringify(industryIndexPath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    // 商家选择
    getMerchant(pageNumber, search) {
      const data = {
        name: search,
        page: pageNumber,
        rows: this.pageSize
      };
      if (this.area_picked) {
        const pickedData = this.getPicked("area_picked");
        data["region_id"] = pickedData.id;
      }
      if (this.checkList) {
        data["circle_id"] = this.checkList.join(",");
      }
      if (this.sortCheckList) {
        data["screen_attr_ids"] = this.sortCheckList.join(",");
      }
      const merchantGetPath = {
        company: "STQ",
        api: "pc_merchant_getName",
        version: "1.0",
        data: data
      };
      this.socketApi.sendSock(JSON.stringify(merchantGetPath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    getArea(pageNumber, search) {
      const areaIndexPath = {
        company: "STQ",
        api: "pc_region_index",
        version: "1.0",
        data: {
          name: search,
          page: pageNumber,
          rows: this.pageSize
        }
      };
      this.socketApi.sendSock(JSON.stringify(areaIndexPath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    // 视频源名查询
    getvideoName(pageNumber, search) {
      const adVideoGetNamePath = {
        company: "STQ",
        api: "pc_AdVideo_getName",
        version: "1.0",
        data: {
          name: search,
          page: pageNumber,
          rows: this.pageSize
        }
      };
      this.socketApi.sendSock(JSON.stringify(adVideoGetNamePath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    getEquipment(pageNumber, search) {
      const data = {
        name: search,
        page: pageNumber,
        rows: this.pageSize
      };
      if (this.merchant_picked) {
        const pickedData = this.getPicked("merchant_picked");
        data["merchant_id"] = pickedData.id;
      }
      const getEquipmentCodePath = {
        company: "STQ",
        api: "pc_equipment_getEquipmentCode",
        version: "1.0",
        data: data
      };
      this.socketApi.sendSock(JSON.stringify(getEquipmentCodePath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    getRuleDetails(ruleId, status) {
      const getRuleDetailsPath = {
        company: "STQ",
        api: "pc_AdPlayRule_getRequestList",
        version: "1.0",
        data: {
          id: ruleId,
          returnType: status
        }
      };
      this.socketApi.sendSock(JSON.stringify(getRuleDetailsPath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    getRuleDetailsSeconed(ruleId) {
      const getRuleDetailsPath = {
        company: "STQ",
        api: "pc_AdPlayRule_getList",
        version: "1.0",
        data: {
          id: ruleId
        }
      };
      this.socketApi.sendSock(JSON.stringify(getRuleDetailsPath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    socketData(res) {
      if (res !== '{"type":"ping"}') {
        const resj = JSON.parse(res);
        if (resj.code === -1) {
          this.$message.error(resj.message);
        } else {
          if (resj.api === "pc_MerchantCircle_getClassifyList") {
            this.merchantCircle = resj.data;
          } else if (
            resj.api === "pc_EquipmentScreen_index" &&
            resj.type === "category"
          ) {
            // 获取屏幕分类
            this.sortList = resj.data;
          } else if (
            resj.api === "pc_EquipmentScreen_index" &&
            resj.type === "option"
          ) {
            // 获取屏幕属性
            this.sortItemList = resj.data;
          } else if (
            resj.api === "pc_AdPlayRule_getRequestList" &&
            resj.type === "update"
          ) {
            // 获取规则信息
            this.temp = Object.assign({}, resj.data[0]); // copy obj
            if (this.temp.play_time) {
              this.temptime = JSON.parse(this.temp.play_time);
              this.temp.data = [this.temp.start_time, this.temp.end_time];
              this.temp.rule_time = "1";
            }

            if (this.temp.region_id) {
              // 区域回显
              const region = [];
              const region_id = this.temp.region_id.split(",");
              const region_name = this.temp.region_name.split(",");
              for (let i = 0; i < region_id.length; i++) {
                region.push({ id: region_id[i], name: region_name[i] });
              }
              this.area_picked = region;
              this.temp.area_show = 1;
              if (this.area_picked.length > 0) {
                this.temp.area_show = 1;
                this.getMerchantCircle();
                this.getCircleOption();
                this.getSort();
                this.getSortOption();
              } else {
                this.temp.area_show = "";
              }

              // 行业回显
              if (this.temp.trade_id) {
                const trade = [];
                const trade_id = this.temp.trade_id.split(",");
                const trade_name = this.temp.trade_name.split(",");
                for (let i = 0; i < trade_id.length; i++) {
                  trade.push({ id: trade_id[i], name: trade_name[i] });
                }
                this.trade_picked = trade;
                this.temp.trade_show = 1;
                if (this.trade_picked.length > 0) {
                  this.temp.trade_show = 1;
                } else {
                  this.temp.area_show = "";
                }
              }

              // 商家回显
              if (this.temp.merchant_id) {
                const merchant = [];
                const merchant_id = this.temp.merchant_id.split(",");
                const merchant_name = this.temp.merchant_name.split(",");
                for (let i = 0; i < merchant_id.length; i++) {
                  merchant.push({ id: merchant_id[i], name: merchant_name[i] });
                }
                this.merchant_picked = merchant;
                this.temp.merchant_show = 1;
                if (this.merchant_picked.length > 0) {
                  this.temp.merchant_show = 1;
                } else {
                  this.temp.merchant_show = "";
                }
              }

              // 广告机回显
              if (this.temp.equipment_id) {
                const equipment = [];
                const equipment_id = this.temp.equipment_id.split(",");
                const equipment_name = this.temp.equipment_name.split(",");
                const equipment_code = this.temp.equipment_code.split(",");
                for (let i = 0; i < equipment_id.length; i++) {
                  equipment.push({
                    id: equipment_id[i],
                    name: equipment_name[i],
                    code: equipment_code[i]
                  });
                }
                this.equipment_picked = equipment;
                this.temp.equipment_show = 1;
                if (this.equipment_picked.length > 0) {
                  this.temp.equipment_show = 1;
                } else {
                  this.temp.equipment_show = "";
                }
              }

              //  更新商圈回显
              if (this.temp.circle_classify_id) {
                const classify_id = this.temp.circle_classify_id.split(",");
                this.classify_id = classify_id[0];
              } else {
                this.classify_id = "0";
              }
              if (this.temp.circle_id) {
                this.checkList = this.temp.circle_id.split(",");
              } else {
                this.checkList = [];
              }

              //  屏幕类型回显
              if (this.temp.equipment_type) {
                const sort_type = this.temp.equipment_type.split(",");
                this.sortType = sort_type[0];
              } else {
                this.sortType = "0";
              }
              if (this.temp.screen_attr_id) {
                const sort_check_list = [];
                this.temp.screen_attr_id.split(",").forEach(element => {
                  sort_check_list.push(parseInt(element));
                });
                this.sortCheckList = sort_check_list;
              } else {
                this.sortCheckList = [];
              }
            }
            this.is_coupon = this.temp.is_coupon; // 放在外层变化触发灵敏
          } else if (
            resj.api === "pc_AdPlayRule_getRequestList" &&
            resj.type === "read"
          ) {
            // 获取规则信息
            this.temp = Object.assign({}, resj.data[0]); // copy obj
            this.temptime = JSON.parse(this.temp.play_time);
            this.temp.data = [this.temp.start_time, this.temp.end_time];
            this.is_coupon = this.temp.is_coupon; // 放在外层变化触发灵敏
          } else if (resj.api === "pc_AdPlayRule_getList") {
            // 获取规则信息
            this.temp = Object.assign({}, resj.data[0]); // copy obj
            this.temptime = JSON.parse(this.temp.play_time);
            this.temp.data = [this.temp.start_time, this.temp.end_time];
            this.is_coupon = this.temp.is_coupon; // 放在外层变化触发灵敏
          } else if (resj.api === "pc_MerchantCircle_index") {
            // 获取商圈
            this.merchantCircleItem = resj.data;
          } else if (resj.api === "pc_AdPlayRule_checkRule") {
            // 规则审核
            this.dialogFormVisible = false;
            this.getList();
            this.$notify({
              title: "成功",
              message: "审核成功",
              type: "success",
              duration: 2000
            });
          } else if (
            resj.api === "pc_AdPlayRule_editRule" &&
            resj.type === "submit"
          ) {
            // 播放规则编辑
            this.temp.count = resj.data.count;
            this.temp.money = resj.data.money;
            this.handleReview();
          } else if (
            resj.api === "pc_AdPlayRule_editRule" &&
            resj.type === "confirm"
          ) {
            // 播放规则编辑
            this.$notify({
              title: "成功",
              message: "更新成功",
              type: "success",
              duration: 2000
            });
            this.$router.push({
              name: "adPlayRule/getRequestList"
            });
          } else if (
            resj.api === "pc_AdPlayRule_addRule" &&
            resj.type === "createRule"
          ) {
            // 规则添加
            this.temp.count = resj.data.count;
            this.temp.money = resj.data.money;
            // 打开弹窗
            this.handleReview();
          } else if (
            resj.api === "pc_AdPlayRule_addRule" &&
            resj.type === "createRuleConfirm"
          ) {
            // 规则添加
            this.dialogFormVisible = false;
            this.$notify({
              title: "成功",
              message: "添加成功",
              type: "success",
              duration: 2000
            });
            this.$router.push({
              name: "adPlayRule/getRequestList"
            });
          } else if (
            resj.api === "pc_AdPlayRule_addRule" &&
            resj.type === "create"
          ) {
            // 规则添加
            // 打开弹窗
            this.temp.count = resj.data.count;
            this.temp.money = resj.data.money;
            this.handleReview();
          } else if (
            resj.api === "pc_AdPlayRule_addRule" &&
            resj.type === "createConfirm"
          ) {
            // 规则添加
            this.dialogFormVisible = false;
            this.$notify({
              title: "成功",
              message: "添加成功",
              type: "success",
              duration: 2000
            });
            this.$router.push({
              name: "adVideo/index"
            });
          } else if (resj.api === "pc_region_index") {
            // 地区模糊查询
            const options = [];
            resj.data.forEach(element => {
              options.push({ id: element.id, name: element.region_name });
            });
            this.areaOptions = options;
            this.areaCount = resj.count;
          } else if (resj.api === "pc_trade_index") {
            // 行业模糊查询
            this.industryOptions = resj.data;
            this.industryCount = resj.count;
          } else if (resj.api === "pc_AdVideo_getName") {
            // 视频源模糊搜索
            this.videoOptions = resj.data;
            this.videoCount = resj.count;
          } else if (resj.api === "pc_equipment_getEquipmentCode") {
            // 设备编号模糊查询
            this.equipmentOptions = resj.data;
            this.equipmentCount = resj.count;
          } else if (resj.api === "pc_merchant_getName") {
            // 商家模糊查找
            this.merchantOptions = resj.data;
            this.merchantCount = resj.count;
          }
        }
      }
    },
    cancelAddRule() {
      if (
        (this.dialogStatus === "create" || this.dialogStatus === "read") &&
        this.createType !== "2"
      ) {
        this.$router.push({
          name: "adVideo/index"
        });
      } else {
        this.$router.push({
          name: "adPlayRule/getRequestList"
        });
      }
    },
    // 时间转换
    getData(data) {
      var date = new Date(data);
      var Y = date.getFullYear();
      var M = date.getMonth() + 1;
      var D = date.getDate();
      return Y + "-" + M + "-" + D;
    },
    getRuleTime(data) {
      const time = [];
      data.forEach(res => {
        time.push(res.start + "-" + res.end);
      });
      return time.join(",");
    }
  }
};
</script>
<style scoped>
.TimeSlot {
  border: 1px solid #e4e7ed;
  padding: 8px;
  display: inline-block;
  border-radius: 5px;
  cursor: pointer;
}
.TimeSlot.selected {
  color: #40aaff;
  border: 1px solid #40aaff;
}
.TimeSlot:hover {
  background-color: #409eff;
  color: #fff;
  border: 1px solid #fff;
}
</style>
